<template>
  <div>
    <a-space class="float_right" v-if="editClkFlag">
      <a-button type="primary" @click="saveBtnClkFn" :loading="savBtnLoading">保存</a-button>
      <a-button @click="cancelBtnClkFn">取消</a-button>
    </a-space>

    <a-button style="margin-top:12px" type="primary" @click="editclkFn" v-else :disabled="Object.keys(personalInfos).length == 0">编辑</a-button>

    <div style="margin-top：50px;" class="tab_wrapper">
      <a-descriptions title=" " :layout="layoutType" :class="editClkFlag ? 'necessary' : ''">
        <a-descriptions-item v-for="(item, key) in personalInfos" :label="labelFilter(key)" :key="key">
          <a-input v-if="editClkFlag && (key == 'name' || key == 'mobile' || key == 'email' || key == 'census' || key == 'address' || key == 'schoolName' || key == 'schoolMajor' || key == 'idCard' || key == 'cardNum' || key == 'bankAddress' || key == 'bankDeposit' || key == 'contractName' || key == 'contractMobile' || key == 'age' )" :default-value="item" placeholder="请输入" :disabled="key == 'idCard' || key == 'age'" @change="(e) => iptOnChange(e.target.value, key)" :maxLength="key == 'mobile' ? 11 : null" allow-clear @blur="iptfocusFn(key)"></a-input>
          <a-select v-else-if="editClkFlag && (key == 'gender' || key == 'marriage' || key == 'nation' || key == 'education' || key == 'political' || key == 'contractRelation')" style="width: 202.5px" @change="handleChange" placeholder="请选择" allowClear :default-value="itemFilterFn(item, key)" show-search option-filter-prop="children" :getPopupContainer="(triggerNode) => triggerNode.parentNode" :disabled="key == 'gender'">
            <a-select-option v-for="(item, index) in selectDataByKey(key)" :key="index" :value="key == 'nation' ? item.name : item.id" :labels="key">
              {{item.name}}
            </a-select-option>
          </a-select>
          <a-date-picker style="width: 202.5px;" v-else-if="editClkFlag && (key == 'firstJobDate' || key == 'birthday')" @change="dateOnChange" :default-value="timeStampFn(item)" :disabled="key == 'birthday'" />
          <span v-else>{{item | allFilter(key)}}</span>
        </a-descriptions-item>
      </a-descriptions>
    </div>
  </div>
</template>

<script>
import datas from '@/utils/data'
import { transferDate, validateBankNo, regTest } from '@/utils/util'
import moment from 'moment'
import { userInfoAddOrUpdateApi, bankNumRegIvkApi } from '@/services/employeeDetail'

let isBankNumReg = true
let isUrgentContactMobileReg = true

export default {
  name: "tabs1",
  props: {
    personalInfos: Object
  },
  filters: {
    allFilter (code, key) {
      if (key == 'gender') {
        if (code) {
          switch (Number(code)) {
            case 1:
              return '男'
            case 2:
              return '女'
            case 0:
              return '未知'
          }
        } else {
          return '无'
        }

      } else if (key == 'marriage') {
        switch (Number(code)) {
          case 1:
            return '已婚已育'
          case 2:
            return '已婚未育'
          case 3:
            return '未婚'
          case 4:
            return '离异'
          case 5:
            return '保密'
          default:
            return code
        }
      } else if (key == 'education') {
        switch (Number(code)) {
          case 1:
            return '初中'
          case 2:
            return '高中'
          case 3:
            return '中专'
          case 4:
            return '大专'
          case 5:
            return '本科'
          case 6:
            return '硕士'
          case 7:
            return '博士'
          case 8:
            return '保密'
          case 0:
            return '无'
        }
      } else if (key == 'political') {
        switch (Number(code)) {
          case 1:
            return '中共党员'
          case 2:
            return '中共预备党员'
          case 3:
            return '群众'
          case 4:
            return '其他党派'
          case 5:
            return '保密'
        }
      } else if (key == 'birthday') {
        // if (typeof code == 'number') {
        //   return transferDate(code, 0)
        // } else {
        //   return '无'
        // }
        return code ? code : '无'
      } else if (key == 'age') {
        // if (code) {
        //   let _birthDate = transferDate(code, 0)
        //   return new Date().getFullYear() - _birthDate.substring(0, _birthDate.indexOf('-'))
        // } else {
        //   return '无'
        // }
        return code ? code : '无'
      } else if (key == 'contractRelation') {
        switch (Number(code)) {
          case 1:
            return '朋友'
          case 2:
            return '父母'
          case 3:
            return '子女'
          case 4:
            return '姊妹'
          case 5:
            return '兄妹'
        }
      } else {
        // return code ? (code.length > 20 ? code.substring(0, 20) + '...' : code) : '无'
        return code ? code : '无'
      }
    },
  },
  watch: {
    personalInfos (n) {
      this.form = { ...n, 'urgentContact': n.contractName, 'urgentContactMobile': n.contractMobile }
      this.personalInfos = n
    }
  },
  created () {
    this.form = { ...this.personalInfos }
  },
  data () {
    return {
      editClkFlag: false,
      layoutType: "horizontal",
      form: {
        urgentContact: '',
        urgentContactMobile: '',
      },
      savBtnLoading: false,
    };
  },
  methods: {
    moment,

    timeStampFn (str) {
      if (str) {
        let _timeStamp = this.moment(str).valueOf()
        return this.moment(Number(_timeStamp))
      }
    },

    editclkFn () {
      this.editClkFlag = true;
      this.layoutType = "vertical";
    },

    cancelBtnClkFn () {
      this.editClkFlag = false;
      this.form = { ...this.personalInfos }
      this.layoutType = "horizontal";
    },

    itemFilterFn (item, key) {
      if (key == 'political' || key == 'contractRelation' || key == 'education' || key == 'marriage' || key == 'gender') {

        if (key == 'education') {
          switch (Number(item)) {
            case 1:
              return '初中'
            case 2:
              return '高中'
            case 3:
              return '中专'
            case 4:
              return '大专'
            case 5:
              return '本科'
            case 6:
              return '硕士'
            case 7:
              return '博士'
            case 8:
              return '保密'
            case 0:
              return '无'
          }
        }

        if (key == 'political') {
          switch (Number(item)) {
            case 1:
              return '中共党员'
            case 2:
              return '中共预备党员'
            case 3:
              return '群众'
            case 4:
              return '其他党派'
            case 5:
              return '保密'
          }
        }

        if (key == 'marriage') {
          switch (Number(item)) {
            case 1:
              return '已婚已育'
            case 2:
              return '已婚未育'
            case 3:
              return '未婚'
            case 4:
              return '离异'
            case 5:
              return '保密'
          }
        }

        if (key == 'contractRelation') {
          switch (Number(item)) {
            case 1:
              return '朋友'
            case 2:
              return '父母'
            case 3:
              return '子女'
            case 4:
              return '姊妹'
            case 5:
              return '兄妹'
          }
        }

        if (key == 'gender') {
          if (item == 0) {
            return 0
          } else {
            return item ? item : undefined
          }
        }
      } else {
        return item ? item : undefined
      }
    },

    labelFilter (str) {
      switch (str) {
        case 'name':
          return '姓名'
        case 'mobile':
          return '手机号码'
        case 'email':
          return '邮箱'
        case 'gender':
          return '性别'
        case 'age':
          return '年龄'
        case 'marriage':
          return '婚姻状况'
        case 'nation':
          return '民族'
        case 'education':
          return '学历'
        case 'political':
          return '政治面貌'
        case 'census':
          return '户籍地址'
        case 'address':
          return '现住址'
        case 'socialSecurityNo':
          return '个人社保账号'
        case 'accumulationFundNo':
          return '个人公积金账号'
        case 'schoolName':
          return '毕业院校'
        case 'schoolMajor':
          return '毕业专业'
        case 'firstJobDate':
          return '首次参加工作时间'
        case 'cardNum':
          return '工资卡账号'
        case 'bankAddress':
          return '开户行地址'
        case 'bankDeposit':
          return '工资卡开户行'
        case 'antuCardType':
          return '证件类型'
        case 'idCard':
          return '证件号码'
        case 'birthday':
          return '出生年月'
        case 'contractName':
          return '紧急联系人姓名'
        case 'contractMobile':
          return '紧急联系人电话'
        case 'contractRelation':
          return '紧急联系人关系'
      }
    },

    dateOnChange (date, dateString) {
      this.form.firstJobDate = dateString
    },

    handleChange (value, option) {
      let _key = option.data.attrs.labels
      this.form[_key] = value
    },

    selectDataByKey (key) {
      if (key == 'gender') {
        return datas.genderData
      } else if (key == 'marriage') {
        return datas.marriageData
      } else if (key == 'nation') {
        return datas.nationSelectData
      } else if (key == 'education') {
        return datas.eduSelectData
      } else if (key == 'political') {
        return datas.politicalSelectData
      } else if (key == 'contractRelation') {
        return datas.contractRelationData
      }
    },

    saveBtnClkFn () {
      if (!this.form.name) {
        this.$message.error('姓名必填！')
        return
      } else {
        if (!/^[\u4e00-\u9fa5]|[a-zA-Z]$/.test(this.form.name)) {
          this.$message.error('姓名请填写中英文！')
          return
        }
      }

      if (!this.form.mobile) {
        this.$message.error('手机号必填！')
        return
      } else {
        if (!regTest.mobileReg(this.form.mobile)) {
          this.$message.error('手机号错误！')
          return
        }
      }

      if (this.form.email) {
        if (!regTest.emailReg(this.form.email)) {
          this.$message.error('邮箱格式不正确!')
          return
        }
      }

      if (this.form.cardNum) {
        if (!isBankNumReg) {
          this.$message.error('请输入正确的银行卡号!')
          return
        }
      }

      if (!isUrgentContactMobileReg) {
        this.$message.error('请输入正确的紧急联系人电话!')
        return
      }

      let {
        name,
        mobile,
        email,
        gender,
        marriage,
        nation,
        census,
        education,
        political,
        address,
        schoolName,
        schoolMajor,
        firstJobDate,
        cardNum,
        bankDeposit,
        bankAddress,
        urgentContact,
        urgentContactMobile,
        contractRelation
      } = this.form

      let params = {
        employeeId: this.$Storage.get('employDetail_employeeId'),// 雇员ID  
        userId: this.$Storage.get('employDetail_userId'),// 用户ID 
        name,// 姓名
        mobile,// 手机号
        email: email ? email : undefined,// 邮箱
        gender,// 性别(1男2女0未知)
        marriage,// 婚姻情况 1:已婚已育,2:已婚未育,3:未婚,4:离异,5:保密
        nation,// 民族
        census,// 户籍
        education,// 最高学历：1:初中,2:高中,3:中专,4:大专,5:本科,6:硕士,7:博士,8:保密
        political,// 政治面貌
        address,// 现住址
        schoolName, // 毕业院校
        schoolMajor, // 毕业专业
        firstJobDate,// 首次工作日期
        cardNum,// 卡号
        bankDeposit,// 开户行
        bankAddress, // 开户行地址import                
        urgentContact, // 紧急联系人
        urgentContactMobile, // 紧急联系人电话
        urgentContactRelation: contractRelation// 紧急联系人关系
      }

      this.savBtnLoading = true
      userInfoAddOrUpdateApi(params).then(res => {
        this.savBtnLoading = false
        let { code, msg } = res.data

        if (code === 200) {
          this.$message.success(msg)
          this.layoutType = "horizontal"
          this.editClkFlag = false
          this.$emit('updatesPersonalInfo')
        } else {
          this.$message.error(msg)
        }
      })
    },

    iptOnChange (e, key) {
      if (key == 'contractName') {
        this.form.urgentContact = e
      } else if (key == 'contractMobile') {
        this.form.urgentContactMobile = e
      } else {
        this.form[key] = e
      }
    },

    iptfocusFn (key) {
      if (key == 'cardNum') {
        if (this.form['cardNum']) {
          bankNumRegIvkApi(this.form['cardNum']).then(res => {
            if (!res.data.validated) {
              // this.$message.error('请输入正确的银行卡号!')
              isBankNumReg = false
            } else {
              isBankNumReg = true
            }
          })
        }
      } else if (key == 'contractMobile') {
        console.log(key, this.form.urgentContactMobile)
        if (this.form.urgentContactMobile) {
          if (!regTest.mobileReg(this.form.urgentContactMobile)) {
            this.$message.error('请输入正确的紧急联系人电话!')
            isUrgentContactMobileReg = false
          } else {
            isUrgentContactMobileReg = true
          }
        }
      }
    },
  }
};
</script>

<style scoped lang="less">
.infos {
  width: 100%;
  margin-left: 20px;
  & div:first-of-type {
    align-items: center;
    justify-content: flex-start;
  }
}

.basicInfo_div {
  color: #a2a2a2;
  & p {
    margin-bottom: 0;
  }
}

.basicInfo_div {
  .tabs_div {
    margin-top: 20px;
  }
}

.editable-add-btn {
  margin: 10px 0;
}

.dsp_flex {
  display: flex;
  display: -webkit-flex;
}

.c_a2 {
  color: #a2a2a2;
}

.desc_p {
  align-items: center;
}

.float_right {
  float: right;
}

.necessaryBefore {
  display: inline-block;
  margin-right: 4px;
  color: #f5222d;
  font-size: 14px;
  font-family: SimSun, sans-serif;
  line-height: 1;
  content: "*";
}

.necessary {
  /deep/.ant-descriptions-row {
    &:nth-of-type(1) {
      .ant-descriptions-item {
        &:nth-of-type(1),
        &:nth-of-type(2) {
          .ant-descriptions-item-label.ant-descriptions-item-colon {
            &:before {
              .necessaryBefore();
            }
          }
        }
      }
    }
  }
}
.dsp_flex {
  display: flex;
  display: -webkit-flex;
}
.tab_wrapper {
  /deep/tr {
    .dsp_flex();
  }
  /deep/td {
    .dsp_flex();
    width: 33.334%;
    & > span:nth-of-type(1) {
      flex-shrink: 0;
    }
  }
}
</style>